<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section>
        选择账号
        <q-space />
      </q-card-section>
      <q-card-section>
        <q-select
          v-model="data.selected"
          :options="data.options"
          label="账号"
          outlined
        />
      </q-card-section>
      <card-footer-buttons
        @ok="onOKClick"
        @cancel="onCancelClick"
      ></card-footer-buttons>
    </q-card>
  </q-dialog>
</template>

<script>
import { useDialogPluginComponent } from "quasar";
import { computed, reactive, watch } from "vue";
import { useStore } from "vuex";
import CardFooterButtons from "../CardFooterButtons.vue";

export default {
  components: { CardFooterButtons },
  emits: [...useDialogPluginComponent.emits],
  setup() {
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
      useDialogPluginComponent();
    const $store = useStore();
    const data = reactive({
      selected: null,
      options: computed(() =>
        $store.getters["persisted/accounts"].map((v) => {
          return { ...v, label: v.nickname };
        })
      ),
    });

    watch(
      () => data.options,
      (val) => {
        if (val && !data.selected) {
          data.selected = val[0];
        }
      }
    );
    return {
      data,
      dialogRef,
      onDialogHide,
      onOKClick() {
        if (!data.selected) {
          return;
        }
        onDialogOK(data.selected);
      },
      onCancelClick: onDialogCancel,
    };
  },
};
</script>
